import { Modal, ModalProps, Input, Button } from 'antd';
import '../styles/entry.scss';
import { useEffect, useState } from 'react';

const { TextArea } = Input;

interface Props extends ModalProps {
  onConfirm?: (words: string) => void;
  placeholder?: string;
  defaultText?: string;
  loading: boolean;
}

const NewWordsModal = ({
  open,
  onConfirm,
  onCancel,
  placeholder,
  defaultText = '',
  title,
  loading,
  ...props
}: Props) => {
  const [text, setText] = useState('');

  useEffect(() => {
    setText(defaultText);
  }, [defaultText]);

  useEffect(() => {
    if (!open) {
      setText('');
    }
  }, [open]);

  return (
    <Modal
      destroyOnClose
      maskClosable={false}
      onCancel={onCancel}
      open={open}
      {...props}
      footer={null}
    >
      <div className="m-2 text-center text-lg font-bold">{title}</div>
      <TextArea
        value={text}
        onChange={(e) => setText(e.target.value)}
        className="entry-input"
        bordered={false}
        rows={6}
        placeholder={placeholder}
      />
      <div className="mt-4 flex items-center justify-center gap-10">
        <Button onClick={onCancel}>取消</Button>
        <Button loading={loading} type="primary" onClick={() => onConfirm && onConfirm(text)}>
          确认
        </Button>
      </div>
    </Modal>
  );
};

export default NewWordsModal;
